<template>
  <div>
    <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
    <el-card class="mt20">
      <el-form :inline="true" :model="searchInfo" ref="searchForm">
        <el-form-item label="商品名称:" prop="productName">
          <el-input v-model="searchInfo.productName"
                    @keyup.enter.native="$refs['standardName '].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="标准名称:" prop="standardName">
          <el-input v-model="searchInfo.standardName "
                    ref="standardName" @keyup.enter.native="$refs['enterpriseName'].focus()" clearable></el-input>
        </el-form-item>
        <el-form-item label="供应商名称:" prop="enterpriseName">
          <el-input v-model="searchInfo.enterpriseName" ref="enterpriseName" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属城市:" prop="cityId">
          <el-select v-model="searchInfo.cityId" placeholder="全部" filterable clearable>
            <el-option
              v-for="item in cityList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人员:" prop="userName">
          <el-input v-model="searchInfo.userName" ref="userName" clearable></el-input>
        </el-form-item>
        <jxf-Date :startTime.sync="searchInfo.updateTimeStart"  :endTime.sync="searchInfo.updateTimeEnd"  startTimeProp="updateTimeStart" endTimeProp="updateTimeEnd"
                  :label="'审核时间段:'"></jxf-Date>
        <el-form-item label="审核状态:" prop="result">
          <el-select v-model="searchInfo.result" placeholder="全部" clearable>
            <el-option
              v-for="item in resultList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>数据列表</span>
        <div>
          <el-button type="primary" @click="exportInfo" :loading="isSuccess">导出为Excel</el-button>
        </div>
      </div>
      <jxf-table :table="tableInfo">
        <template slot="picUrl" slot-scope="scope">
          <viewer class="imgCenter" :images="[scope.row.picUrl]">
            <img :src="scope.row.picUrl" alt="">
          </viewer>
        </template>
        <template slot="result" slot-scope="scope">
          <span>{{scope.row.result === 0 ? "打回": scope.row.result === 1 ? "审核通过":""}}</span>
        </template>
      </jxf-table>
    </el-card>
    <jxf-pagination :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                    @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
  </div>
</template>

<script>

  import formatDate from '@/assets/js/formatDate'
  export default {
    name: "ProductAuditRecord",
    data() {
      return {
        title: "审核记录",
        cityList: [],
        resultList: [{
          label: "审核通过",
          value: 1
        }, {
          label: "打回",
          value: 0
        }],
        isSuccess: false,
        searchInfo: {
          productName: '',
          standardName: '',
          enterpriseName: '',
          cityId: null,
          userName: "",
          updateTimeStart: "",
          updateTimeEnd: "",
          result: null
        },
        tableInfo: {},
        showProdDetail: false,
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        productId: null
      }
    },
    methods: {
      // 表单初始化
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr:  [
            // {
            //   id: '1',
            //   label: '编号',
            //   prop: 'productNo'
            // },
            {
              id: '2',
              label: '商品图片',
              prop: 'picUrl',
              show: 'template'
            },
            {
              id: '3',
              label: '城市',
              prop: 'cityName'
            },
            {
              id: '4',
              label: '供应商名称',
              minWidth: "100",
              prop: 'enterpriseName'
            },
            {
              id: '5',
              label: '商品名称',
              prop: 'productName'
            },
            {
              id: '6',
              label: '商品标准名称',
              minWidth: "110",
              prop: 'standardName'
            },
            {
              id: '7',
              label: '大类',
              prop: 'firstClassifyName'
            },
            {
              id: '8',
              label: '中类',
              prop: 'secClassifyName'
            },
            {
              id: '9',
              label: '小类',
              prop: 'thiClassifyName'
            },
            {
              id: '10',
              label: '规格',
              prop: 'specifications'
            },
            {
              id: '11',
              label: '审核状态',
              show: 'template',
              prop: 'result'
            },
            {
              id: '12',
              label: '审核人',
              prop: 'userName'
            },
            {
              id: '13',
              label: '审核时间',
              width: '160',
              prop: 'auditTime'
            },
            {
              id: '14',
              label: '审核记录',
              prop: 'content'
            }
          ],
          data: []
        }
      },
      // 获取城市列表
      getCityList() {
        ajax.post(apis.product.getCityById, {type: 5})
          .then(res => {
            if (res.success === true && res.data !== []) {
              this.cityList = res.data.map(item => {
                return {
                  label: item.name,
                  value: item.id
                }
              })
            }
          })
      },
      // 获取商品列表
      getProductList() {
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.post(apis.productAudit.productCheckLogList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      // 导出
      exportInfo(){
        this.isSuccess = true;
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.export(apis.productAudit.exportProductCheckLogList, info)
          .then(res => {
            this.isSuccess = false
          })
      },
      // 搜索
      onSearch() {
        this.currentPage = 1
        this.getProductList()
      },
      // 搜索表单重置
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getProductList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getProductList()
      },
      // 商品列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            id: item.id,
            productNo: item.productNo,
            picUrl: item.picUrl,
            cityName: item.cityName,
            enterpriseName: item.enterpriseName,
            productName: item.productName,
            standardName: item.standardName,
            firstClassifyName: item.firstClassifyName,
            secClassifyName: item.secClassifyName,
            thiClassifyName: item.thiClassifyName,
            specifications: item.specifications,
            result: item.result,
            userName: item.userName,
            auditTime: item.auditTime !== null ? formatDate.timeFormat(item.auditTime) : "",
            content: item.content
          }
        })
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.resetForm("searchForm")
        this.getProductList()
      },
    },
    created() {
      this.init()
      this.getCityList()
      this.getProductList()
    }
  }
</script>

<style lang="scss" scoped>
  .jxf-table-card {
    img {
      width: 50px;
      height: 50px;
    }
    .el-button {
      padding: 0;
    }
  }
</style>
